//  声明一个变量存储起始的页数:当输入框里面什么都没有的时候 能够获取到起始页的数据
var data = { pageNum: 1, pageCount: 5 }
//  用来渲染页面的函数getPage
function getPage(group) {
    console.log(group);
    //  利用jquery封装的ajax进行数据传输,可以不用在url里进行参数的拼接
    $.ajax({
        url: `http://127.0.0.1:3000/partmessage/search`,
        //  传输类型
        type: 'get',
        //  返回的数据
        data: group,
        //  数据类型    
        dataType: 'json'
    }).then(res => {
        console.log(res);
        //  解构返回的数据res
        var { code, data, total, pageCount, pageNum } = res;
        //  查看获取到的数据
        console.log(code, data, total, pageCount, pageNum);
        //  如果状态码为200,则说明获取到了数据
        if (code == 200) {
            $('#tbody').html(
                data.map(value => {
                    const { pid, pcode, pname, cost, price, bank, aname ,utime} = value
                    return `
                    <tr>
                    <td>${pid}</td>
                    <td>${pcode}</td>
                    <td>${pname}</td>
                    <td>${cost}</td>
                    <td>${price}</td>
                    <td>${bank}</td>
                    <td>${moment(utime).format('YYYY/MM/DD HH:mm:ss')}</td>
                    <td>${aname}</td>
                    <td><button onclick="upMess(this)">修改</button><button onclick="deMess(${pid})">删除</button></td>
                </tr>
                    `
                }).join('')
            )
            $('.pages>ul').empty()
            //  声明一个变量，用来保存总共的li个数
            var pageEnd = Math.ceil(total / pageCount)
            console.log(pageEnd)
            let start = pageNum - 2
            let end = pageNum + 2
            if (pageNum < 1) {
                pageNum = 1
            }
            if (start < 1) {
                start = 1
                end = start + 4
            }
            if (end > pageEnd) {
                end = pageEnd
                start = end - 4
                if (start < 1) {
                    start = 1
                }
            }
            for (let i = start; i <= end; i++) {
                //  渲染出li
                $('.pages>ul').append(`<li class=${i == pageNum ? 'active' : ''}>${i}</li>`)
            }
            const $btn_next = $('.pages>button').eq(1)
            const $btn_prev = $('.pages>button').eq(0)
            pageNum == 1 ? $btn_prev.hide() : $btn_prev.show()
            pageNum == pageEnd ? $btn_next.hide() : $btn_next.show()
        } else {
            $('#tbody').html('查无此物')
        }
    })
}
//  点击在分页li上时
$('.pages>ul').on('click', '>li', function () {
    //  当点击在li上时，获取input输入框里面的值
    const pageNum = $(this).html() * 1
    const pname = $('#pname').val()
    const pcode = $('#pcode').val()
    const aname = $('#aname').val()
    //  并将这些值添加到data对象里
    data['pname'] = pname
    data['pcode'] = pcode
    data['aname'] = aname
    data['pageNum'] = pageNum
    //  将这些值当作实参传递给渲染的那个函数getPage
    getPage(data);
})
//  点击在上一页和下一页时
$('.pages>button').eq(1).click(function () {
    $('.pages li.active').next().click()
})
$('.pages>button').eq(0).click(function () {
    $('.pages li.active').prev().click()
})
//  查询按钮点击事件
$('#btn').click(function () {
    const pname = $('#pname').val()
    const pcode = $('#pcode').val()
    const aname = $('#aname').val()
    data['pname'] = pname
    data['pageNum'] = 1
    // data['pageCount']=5
    data['pcode'] = pcode
    data['aname'] = aname
    console.log(data);
    //  点击查询按钮时和点击li上时同理
    getPage(data);
})
//点击新增按钮 显示出新增配件界面
$('#add').click(function () {
    $('#partmessageadd').fadeIn(1500)
})

//  价格验证
$('#price').blur(function () {
    const cost = $('#cost').val()
    const price = $('#price').val()
    console.log(cost, price);
    if (cost >= price) {
        $('#compare').show()
    }
    if (!price) {
        $('#compare').hide()
    }
})
$('#price').focus(function () {
    $('#compare').hide()
})

//新增配件 保存按钮点击事件
$('#uphold').click(function () {
    const pcode = $('#pCode').val()
    const pname = $('#pName').val()
    const cost = $('#cost').val()
    const price = $('#price').val()
    const bank = $('#bank').val()
    const pcategory = $('#pcategory').val()
    const params = { pcode, pname, cost, price, bank, pcategory }
    console.log(params);
    if ((pcode && pname && cost && price && bank && pcategory && params)) {
        var url = `http://127.0.0.1:3000/partmessage/add`
        $.post(url, params, data => {
            console.log(data);
            if (data.code == 200) {
                $('#partmessageadd').html('新增配件信息成功')
            } else {
                $('#partmessageadd').html('新增配件信息失败')
            }
        })
        $('#partmessageadd').fadeOut(2000)
        $('#btn').click()
    } else {
        alert('请补全配件信息')
    }
})
//点击删除按钮触发的函数
function deMess(e) {
    console.log(e);
    if (confirm('确认删除该数据？')) {
        var pid = e
        var url = `http://127.0.0.1:3000/partmessage/delete`
        $.post(url, { pid }, data => {
            console.log(data);
            if (data.code == 200) {
                alert('员工信息删除成功')
                $('#btn').click()
            } else {
                alert('员工信息删除失败')
            }
        })
    }
}
//点击修改按钮触发的函数
function upMess(e) {
    console.log(e);
    var pid = e.parentNode.parentNode.children[0].innerHTML * 1
    console.log(pid);
    $('.updateul').fadeIn(1000);
    var url = `http://127.0.0.1:3000/partmessage/?pid=` + pid
    $.get(url, data => {
        console.log(data);
        if (data.code == 200) {
            $('.updateul').html(
                data.data.map(value => {
                    const { pid, pcode, pname, cost, price, bank, pcategory } = value
                    $('#upCategory').ready(function () {
                        $('#upCategory').val(`${pcategory}`)
                    })
                    return `
                    <li>
            <h2>请修改配件信息</h2>
        </li>
        <li>
            <span>序号</span>
            <input id="upPid" value="${pid}" type="text" disabled>
        </li>
        <li>
            <span>请修改配件编号</span>
            <input value="${pcode}" type="text" id="upPcode">
        </li>
        <li>
            <span>请修改配件名称</span>
            <input value="${pname}" type="text" id="upPname">
        </li>
        <li>
            <span>请修改含税成本价</span>
            <input value="${cost}" type="text" id="upCost">
        </li>
        <li>
            <span>请修改售价</span>
            <input value="${price}" type="text" id="upPrice">
        </li>
        <li>
            <span>请修改库存数量</span>
            <input value="${bank}" type="text" id="upBank">
        </li>
        <li>
            <span>请选择配件类别</span>
            <select id="upCategory">
                <option value="1">发动机</option>
                <option value="2">燃油系统</option>
                <option value="3">冷却系统</option>
                <option value="4">机体</option>
                <option value="5">养护品</option>
                <option value="6">车身钣金件</option>
                <option value="7">油品</option>
                <option value="8">刹车转向系统</option>
                <option value="9">电子件</option>
            </select>
        </li>
        <li><button onclick="changeMessage(this)">确认修改</button></li>
                    `
                })
            )
        }
    })
}
//  点击确认修改按钮调用的函数
function changeMessage(e) {
    console.log(e);
    const pid = $('#upPid').val() * 1
    const pcode = $('#upPcode').val()
    const pname = $('#upPname').val()
    const cost = $('#upCost').val() * 1
    const price = $('#upPrice').val() * 1
    const bank = $('#upBank').val() * 1
    const pcategory = $('#upCategory').val() * 1
    const params = { pid, pcode, pname, cost, price, bank, pcategory }
    console.log(params);
    var url = `http://127.0.0.1:3000/partmessage/update`
    $.post(url, params, data => {
        console.log(data);
        if (data.code == 200) {
            $('.updateul').html('配件信息修改成功，即将刷新页面')
        } else {
            alert('信息修改失败，请再次尝试')
        }
    })
    $('.updateul').fadeOut(3000);
    $('#btn').click()
}